Google Maps API

Introduction

Outline

What is an API

An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. -- From Wikipedia: http://en.wikipedia.org/wiki/Api

Google Maps API Version

Reference Information

Google Maps API Family

http://code.google.com/apis/maps/

Javascript API Home Page

http://code.google.com/apis/maps/documentation/javascript/

Javascript Basics Entry Page

http://code.google.com/apis/maps/documentation/javascript/basics.html

Javascript API v3 Tutorial Page

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Key Components

Map object options

Types (required)

ROADMAP

SATELLITE

HYBRID

TERRAIN

Latitude and Longitude (required)

specification of where the map should initially be centered

Zoom Level (required)

0=global, higher values increasingly local. Limited by map type

Controls

Overlays

Overlay Types documentation

Marker

points depicted by specified or defined icons at locations within the map

Polyline

linear features defined by multiple points with a defined style for the line

Polygon

closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified.

(Ground) Overlay Maps

Image-based map layers that replace or overlay Google layers - registered to the map coordinates

Info Windows

floating content windows for displaying content defined as HTML, a DOM element, or text string

Layers

Grouped display content assigned to a specific layer: KmlLayer, FusionTablesLayer, TrafficLayer, BicyclingLayer

Custom Overlays

definition of programmatically controlled layers

Services

Events

Examples

Simple - Roadmap

Simple Google ROADMAP Map 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; 
                margin: 0px; 
                padding: 0px; 
                background-color: black; 
                color: #CCCCCC;
                text-align: center}
            #map_canvas { width:90%; 
                height:80%; 
                margin-left:auto; 
                margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
                zoom: 8,
                center: classroom,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
            }
        </script>
    </head>

    <body onload="initialize()">
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>
    </body>
</html>

Simple - Satellite

Simple Google SATELLITE Map 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps02.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; 
                margin: 0px; 
                padding: 0px; 
                background-color: black; 
                color: #CCCCCC;
                text-align: center}
            #map_canvas { width:90%; 
                height:80%; 
                margin-left: auto; 
                margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var classroom = new google.maps.LatLng(35.084280,-106.624073)
                var myOptions = {
                    zoom: 8,
                    center: classroom,
                    mapTypeId: google.maps.MapTypeId.SATELLITE
                };
                var map = new google.maps.Map(
                    document.getElementById("map_canvas"), 
                    myOptions);
            }
        </script>
    </head>
    
    <body onload="initialize()">
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>
    </body>
</html>

Simple - Hybrid

Simple Google HYBRID Map 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 8,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Simple - Terrain

Simple Google TERRAIN Map 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps04.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 8,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Simple - Hybrid - Zoomed

Simple Google HTBRID zoomed Map 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps05.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Simple - Zoomed - Modified Controls

Simple Google HYBRID zoomed Map with modified controls 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps06.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID,
              zoomControl: true,
              zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
              mapTypeControl: true,
              mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
              streetViewControl: false
            };
            var map = new google.maps.Map(
                document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
    </head>

    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Markers

Simple Google HYBRID zoomed Map with markers 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps07.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
            
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
            
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Polyline

Simple Google HYBRID zoomed Map with markers and a polyline 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps08.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: 
            auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
        
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
        
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
        
            var officeVisitCoordinates = [
              office,
              new google.maps.LatLng(35.084445,-106.624327),
              new google.maps.LatLng(35.084309,-106.624308),
              classroom
              ];
            var officePath = new google.maps.Polyline({
              path: officeVisitCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            });
            officePath.setMap(map)
          }
        </script>
    </head>

    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Polygon

Simple Google HYBRID zoomed Map with markers and a polygon 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps09.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
            var buildingCoordinates = [
              new google.maps.LatLng(35.084498,-106.624921),
              new google.maps.LatLng(35.084558,-106.624911),
              new google.maps.LatLng(35.084566,-106.624970),
              new google.maps.LatLng(35.084609,-106.624966),
              new google.maps.LatLng(35.084544,-106.624383),
              new google.maps.LatLng(35.084438,-106.624317),
              new google.maps.LatLng(35.084384,-106.623922),
              new google.maps.LatLng(35.084164,-106.623970),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084391,-106.624284)
              ];
            var bldgPoly = new google.maps.Polygon({
              paths: buildingCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35
            });
            bldgPoly.setMap(map)
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Adding an Info Window

Simple Google HYBRID zoomed Map with markers, a polygon and an Info Window 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps10.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; 
            margin: 0px; 
            padding: 0px; 
            background-color: black; 
            color: #CCCCCC;
            text-align: center}
          #map_canvas { width:90%; 
            height:80%; 
            margin-left: auto; 
            margin-right: auto }
          .infoBox { color:black }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var classroom = new google.maps.LatLng(35.084280,-106.624073)
            var office = new google.maps.LatLng(35.084506,-106.624899)
            var myOptions = {
              zoom: 18,
              center: classroom,
              mapTypeId: google.maps.MapTypeId.HYBRID
              };
            var map = new google.maps.Map(
              document.getElementById("map_canvas"), 
              myOptions);
            var classroomMarker = new google.maps.Marker({
              position: classroom,
              title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
              });
            classroomMarker.setMap(map);
            var officeMarker = new google.maps.Marker({
              position: office,
              title:"Office, Bandelier West, Room 107"
              });
            officeMarker.setMap(map); 
            var buildingCoordinates = [
              new google.maps.LatLng(35.084498,-106.624921),
              new google.maps.LatLng(35.084558,-106.624911),
              new google.maps.LatLng(35.084566,-106.624970),
              new google.maps.LatLng(35.084609,-106.624966),
              new google.maps.LatLng(35.084544,-106.624383),
              new google.maps.LatLng(35.084438,-106.624317),
              new google.maps.LatLng(35.084384,-106.623922),
              new google.maps.LatLng(35.084164,-106.623970),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084214,-106.624324),
              new google.maps.LatLng(35.084391,-106.624284)
              ];
            var bldgPoly = new google.maps.Polygon({
              paths: buildingCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35
            });
            bldgPoly.setMap(map);
            var classInfoContent = '<div class="infoBox">' +
              '<p>This is the location for the Geography 485L/585L class</p>' +
              '</div>'
            var classInfoWindow = new google.maps.InfoWindow({
              content: classInfoContent
              });
            google.maps.event.addListener(classroomMarker, 'click', function() {
              classInfoWindow.open(map,classroomMarker);
              });
          }
        </script>
    </head>
    
    <body onload="initialize()">
      <h1>Sample Map</h1>
      <div id="map_canvas"></div>
    </body>

</html>

Getting Started with Styled Maps - Video

Styled Maps Documentation | Styled Maps Wizard | YouTube Introductory Video

Google Maps Styled Maps Wizard 

Map Example: Simple - Styled

Styled Google ROADMAP with POIs emphasized 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/gmaps_styled.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
    color: #CCCCCC;
    text-align: center}
  #map_canvas { width:90%; 
    height:80%; 
    margin-left: 
    auto; 
    margin-right: auto }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var myOptions = {
      zoom: 8,
      center: classroom,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
              {
                featureType: "water",
                stylers: [
                  { visibility: "on" },
                  { hue: "#0008ff" }
                ]
              },{
                featureType: "road.highway",
                stylers: [
                  { hue: "#ff1a00" }
                ]
              },{
                featureType: "road.arterial",
                stylers: [
                  { hue: "#ffa200" },
                  { visibility: "simplified" }
                ]
              },{
                featureType: "road.local",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "administrative",
                stylers: [
                  { visibility: "simplified" }
                ]
              },{
                featureType: "poi",
                stylers: [
                  { visibility: "on" },
                  { hue: "#00ffff" }
                ]
              },{
                featureType: "poi",
                stylers: [
                  { visibility: "on" }
                ]
              }
            ]
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
</script>
</head>

<body onload="initialize()">
  <h1>Sample Map - Styled (POIs Emphasized)</h1>
  <div id="map_canvas"></div>
</body>

</html>

Google I/O 2011: Managing and visualizing your geospatial data with Fusion Tables - Video

Fusion Tables Introduction Video - Some particularly relevant sections: Introduction (0:00 - 10:30) | Google Maps API Integration (21:40 - 34:42) | Summary and Links (52:00 - 52:40)

Fusion Tables Documentation/Help

Google Fusion Tables Introduction Video 

Bringing It All Together

NAWRS Mapper 

http://karlbenedict.com/nawrs/

Fusion Tables: Merged document info, State bounding boxes, HUC bounding boxes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8" src="./core.js"></script>

<!-- DataTables and DataTables CSS -->
<link rel="stylesheet" type="text/css" 
  href="http://kkb-projects.s3.amazonaws.com/nawrs/js/DataTables-1.9.4/
  media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" 
  href="http://kkb-projects.s3.amazonaws.com/nawrs/js/DataTables-1.9.4/extras/TableTools/
  media/css/TableTools.css">
<script type="text/javascript" charset="utf8" 
  src="http://kkb-projects.s3.amazonaws.com/nawrs/js/DataTables-1.9.4/media/js/
  jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" 
  src="http://kkb-projects.s3.amazonaws.com/nawrs/js/DataTables-1.9.4/extras/TableTools/media/js/
  TableTools.min.js"></script>

</head>

<body onload="initialize()">
  <h1>NAWRS Mapper</h1>
  <div id="docsReservations">Reservations with Documents</div>
  <div id="docsReservationsPopUp"><ul id="docsReservationsList"></ul></div>
  <div id="docsStates">States with Documents</div>
  <div id="docsStatesPopUp"><ul id="docsStatesList"></ul></div>
  <div id="docsHucs">Hydrologic Regions with Documents</div>
  <div id="docsHucsPopUp"><ul id="docsHucsList"></ul></div>
  <div id="docsType">Documents by Type</div>
  <div id="docsTypePopUp"><ul id="docsTypeList"></ul></div>
  <div id="map_canvas"></div>
  <div id="docListHandle">Document List</div>
  <div id="docList">
    <table id="docListTable">
  </table>
  </div>
  
</body>

</html>

OpenLayers Javascript Framework

Outline

OpenLayers Capabilities

Distinguishing Characteristics Between OpenLayers and Google Maps

Resources

OpenLayers Home Page

Application Programming Interface (API) Reference

Examples

Demonstrations and Examples

Basic OpenLayers map using OpenStreetMap basemap 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">        
        // define global variables
        var lon = -106.5;
        var lat = 36;
        var zoom = 3;
        var map;
        var layer;

        // =============== Initialization function ===================
        function init(){
            map = new OpenLayers.Map( 'map' );
            
            // =========== OSM Map ====================
            layer = new OpenLayers.Layer.OSM( "Open Street Map");
            map.addLayer(layer);
            
            map.setCenter(
                new OpenLayers.LonLat(lon, lat).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), zoom
            );                
        }
        // =============== End of Initialization Function ============
        
    </script>
    <style type="text/css">
        #map {width:90%; height:500px}
    </style>
  </head>
  <body onload="init()">
    <h1>Basic OpenLayers Map</h1>
    <p>Shows the basic use of OpenLayers with the 
    <a href="http://www.openstreetmap.org/">OpenStreetmap</a> basemap</p>   
    <!-- Map DIV -->
    <div id="map"></div>    
  </body>
</html>

Demonstration and Examples - Online Resources

Map Object Options

Map Object Options API Reference

Two methods for constructing a new OpenLayers.Map object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    // create a map with default options in an element with the id "map1"
    var map = new OpenLayers.Map("map1");
    
    // create a map with non-default options in an element with id "map2"
    var options = {
        maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
        maxResolution: 156543,
        units: 'm',
        projection: "EPSG:41001"
    };
    var map = new OpenLayers.Map("map2", options);
    
    // map with non-default options - same as above but with a single argument
    var map = new OpenLayers.Map({
        div: "map_id",
        maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
        maxResolution: 156543,
        units: 'm',
        projection: "EPSG:41001"
    });

Excerpts from the API documentation

allOverlays

{Boolean} Allow the map to function with “overlays” only. Defaults to false. If true, the lowest layer in the draw order will act as the base layer. In addition, if set to true, all layers will have isBaseLayer set to false when they are added to the map.

div

{DOMElement|String} The element that contains the map (or an id for that element). If the OpenLayers.Map constructor is called with two arguments, this should be provided as the first argument. Alternatively, the map constructor can be called with the options object as the only argument. In this case (one argument), a div property may or may not be provided. If the div property is not provided, the map can be rendered to a container later using the render method.

layers

{Array(OpenLayers.Layer)} Ordered list of layers in the map

tileSize

{OpenLayers.Size} Set in the map options to override the default tile size for this map.

projection

{String} Set in the map options to override the default projection string this map - also set maxExtent, maxResolution, and units if appropriate. Default is "EPSG:4326".

units

{String} The map units. Defaults to 'degrees'. Possible values are 'degrees' (or 'dd'), 'm', 'ft', 'km', 'mi', 'inches'.

resolutions

{Array(Float)} A list of map resolutions (map units per pixel) in descending order. If this is not set in the layer constructor, it will be set based on other resolution related properties (maxExtent, maxResolution, maxScale, etc.).

maxResolution

{Float} Default max is 360 deg / 256 px, which corresponds to zoom level 0 on gmaps. Specify a different value in the map options if you are not using a geographic projection and displaying the whole world.

minResolution

{Float}

maxScale

{Float}

minScale

{Float}

maxExtent

{OpenLayers.Bounds} The maximum extent for the map. Defaults to the whole world in decimal degrees (-180, -90, 180, 90). Specify a different extent in the map options if you are not using a geographic projection and displaying the whole world.

minExtent

{OpenLayers.Bounds}

restrictedExtent

{OpenLayers.Bounds} Limit map navigation to this extent where possible. If a non-null restrictedExtent is set, panning will be restricted to the given bounds. In addition, zooming to a resolution that displays more than the restricted extent will center the map on the restricted extent. If you wish to limit the zoom level or resolution, use maxResolution.

numZoomLevels

{Integer} Number of zoom levels for the map. Defaults to 16. Set a different value in the map options if needed.

Layer Object Options

Layer Object Options API Reference

Common Pattern of Layer Object Creation (varies some depending upon the specific layer type)

1
2
3
4
5
6
    new OpenLayers.Layer.*** (
        'layer name',
        'layer URL',
        {server-related options}, 
        {OpenLayers Layer Object options}
    )
id

{String}

name

{String}

isBaseLayer

{Boolean} Whether or not the layer is a base layer. This should be set individually by all subclasses. Default is false

displayInLayerSwitcher

{Boolean} Display the layer’s name in the layer switcher. Default is true.

visibility

{Boolean} The layer should be displayed in the map. Default is true.

attribution

{String} Attribution string, displayed when an OpenLayers.Control.Attribution has been added to the map.

projection

{OpenLayers.Projection} or {String} Set in the layer options to override the default projection string this layer - also set maxExtent, maxResolution, and units if appropriate. Can be either a string or an OpenLayers.Projection object when created -- will be converted to an object when setMap is called if a string is passed.

units

{String} The layer map units. Defaults to 'degrees'. Possible values are 'degrees'’ (or 'dd'), 'm', 'ft', 'km', 'mi', 'inches'.

scales

{Array} An array of map scales in descending order. The values in the array correspond to the map scale denominator. Note that these values only make sense if the display (monitor) resolution of the client is correctly guessed by whomever is configuring the application. In addition, the units property must also be set. Use resolutions instead wherever possible.

resolutions

{Array} A list of map resolutions (map units per pixel) in descending order. If this is not set in the layer constructor, it will be set based on other resolution related properties (maxExtent, maxResolution, maxScale, etc.).

maxExtent

{OpenLayers.Bounds} The center of these bounds will not stray outside of the viewport extent during panning. In addition, if displayOutsideMaxExtent is set to false, data will not be requested that falls completely outside of these bounds.

minExtent

{OpenLayers.Bounds}

maxResolution

{Float} Default max is 360 deg / 256 px, which corresponds to zoom level 0 on gmaps. Specify a different value in the layer options if you are not using a geographic projection and displaying the whole world.

minResolution

{Float}

numZoomLevels

{Integer}

minScale

{Float}

maxScale

{Float}

displayOutsideMaxExtent

{Boolean} Request map tiles that are completely outside of the max extent for this layer. Defaults to false.

transitionEffect

{String} The transition effect to use when the map is panned or zoomed.

There are currently two supported values

null No transition effect (the default).

resize Existing tiles are resized on zoom to provide a visual effect of the zoom having taken place immediately. As the new tiles become available, they are drawn over top of the resized tiles.

Additional Map and Layer Object Functions & Events

Both Map and Layer Objects have a number of associated functions as well

WMS Layer Configuration

Some key issues to be aware of when using the WMS Layer Class:

Sample WMS Layer Object Creation

OpenLayers map with multiple OGC WMS layers 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/openLayers10_wms01.html

1
2
3
4
5
6
7
    countiesLayer = new OpenLayers.Layer.WMS( 
        "US Counties", 
        "http://webservices.nationalatlas.gov/wms?",
        {layers: "counties", version: '1.3.0', transparent: 'TRUE'},
        {isBaseLayer: false, visibility: false, opacity: .8}
    );
    map.addLayer(countiesLayer);

Vector Layer Configuration

Vector layers support

Vector Layer Objects are Typically Defined using three OpenLayers classes

Protocol

Connection protocol for requesting the data that would be provided from an external source

Format

The OpenLayers supported format of the vector data object

Strategy

A specification of how OpenLayers should request the data from the server, and also handle the data within the client (browser).

OpenLayers map with multiple OGC WMS layers, vector overlays and KML layers 

http://karlbenedict.com/presentations/2014-04-NMGIC/examples/openLayers11_vectorData_KML.html

Sample Point Feature Object creation

1
2
3
    var Coord_classroom = new OpenLayers.Geometry.Point(-106.624073,35.084280);
    var Point_classroom = new OpenLayers.Feature.Vector(Coord_classroom);
    Layers["localFeatures"].addFeatures([Point_classroom])

Sample KML Layer Object creation

1
2
3
4
5
6
7
8
9
10
11
    Layers.counties = new OpenLayers.Layer.Vector("KML - Counties", {
        projection: map.displayProjection,
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "NMCounties.kml",
            format: new OpenLayers.Format.KML({
                extractAttributes: true
            })
        })
    });
    map.addLayer(Layers.counties)

Questions?